﻿<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./icons/iconfont.css">
<style>
	@font-face
	{
		font-family: "华文彩云";
		src: url('./fonts/STCAIYUN.TTF');
	}
	@font-face
	{
		font-family: "方正舒体";
		src: url('./fonts/FZSTK.TTF');
	}
	@font-face
	{
		font-family: "SimSun";
		src: url('./fonts/simsun.ttc');
	}
	span {
		-webkit-touch-callout:none;
		-webkit-user-select:none;
		-khtml-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
	}
	html,body,.viewport,.consolemain{width:100%;height:100%;}
	.viewport,.consolemain{position:relative;}
	.mycanvas{background-position: center;background-size: 100%;background-repeat:no-repeat;position:absolute;top:0;left:0;display:none;
	/*top:40%;left:50%; 
	transform:translate(-50%,-50%); 
	-moz-transform:translate(-50%,-50%);
	-webkit- transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);*/ overflow:hidden;}
	.fildbglist{position:absolute;top:40%;left:50%; padding:20px; outline:dashed 1px #BBB4B4;
	transform:translate(-50%,-50%); 
	-moz-transform:translate(-50%,-50%);
	-webkit- transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);}
	.bglistview{position:absolute;z-index:2;top:0;background:rgba(0,0,0,.9);min-height:100%;display:none;padding-bottom:5%;}
	.bglistview li{ flex-grow: 3; width:20%;margin:2rem 0 0 3%;display:inline-block;border:solid 1px #000;}
	.caozuobtn{position:fixed;bottom:0;width:100%;height:4rem;;background:rgba(0,0,0,.5);display: -webkit-flex;
	display: flex;}
	.caozuobtn a{flex:1;-moz-flex:1;-o-flex:1;  text-align:center;line-height:4rem;}
	.caozuobtn i{font-size:2rem;color:#ffffff;}
	/*text*/
	.textviews{position:fixed;z-index:2;width:100%;height:100%;background:rgba(0,0,0,.7);top:0;left:0;display:none;}
	.colorlist{position:fixed;bottom:0;left:0;width:100%;height:7rem;background:#000;}
	.colorlist p{color:#ffffff; margin-top:0.6rem;}
	.colorlist b{margin-left:0.3rem;font-weight:normal;}
	.textnav{height:4rem;width:100%;background:#000000;padding:0 1.5rem;}
	.textnav a{color:#ffffff;font-size:1.6rem;line-height:4rem;float:left;}
	.textnav .texcomplete{color:#1BA800;float:right;}
	.textinputv{height:80%;}
	.textinputv textarea{border:none;padding:2px 0.5rem;background:none;width:100%; outline:none;font-size:2.6rem;height:70%;    }
	textarea{color:#ffffff;}
	.colorlist i{width: 2rem;height: 2rem;display: inline-block;margin: 0 0.5rem;border-radius: 2px; margin-top:0.5rem;}
	.clr_bai{background:#ffffff;}
	.clr_hong{background:#ff0000;}
	.clr_fen{background:#FF5ECC;}
	.clr_huang{background:#fff56f;}
	.clr_lan{background:#34CFEF;}
	.clr_lv{background:#04A03D;}
	.clr_hei{background:#000000;border:solid 1px #ffffff;}
	.ftf-my{ font-family:'Microsoft YaHei';}
	.ftf-si{ font-family:'SimSun';}
	.ftf-he{ font-family:'方正舒体';}
	.ftf-ar{ font-family:'Arial';}
	.ftf-lf{ font-family:'华文彩云';}
	
	.textstyle{position:absolute;outline: transparent solid 10px;white-space: nowrap}
	.textstyle::after{ content: "";
		position: absolute;
		border: dashed 1px;
		padding: 18px;
		left: -10px;
		top: -10px;
		right: -10px;min-height: 100%;
	}
	/*保存*/
	.consaveimgv{width:100%;height:100%;text-align:center;position:fixed;top:0;background:rgba(250,250,250,.8);display:none;z-index:3;}
	.consaveimgv img{width:70%;margin-top:10%;}
	.consaveimgv p{line-height:6rem;}
	.consaveimgv a{padding:1.1rem 3rem;;font-size:1.5rem;color:#ffffff;background:#4BF46E;border-radius:5px;}
	.gbsaveimg{position:absolute;right:10px;top:10px;font-size:20px;}
	.gbsaveimg i{font-size:30px;}
	.colorlist .jiacu{font-weight:bold;}
	.colorlist .jiacu.active{font-weight:bold;box-shadow:1px 1px 1px #6E79F5;}
	/*缩放*/
	.sfbtnv{position:absolute;display:none;z-index:1;width:13.8rem;}
	.sfbtnv span{display: inline-block;
    width: 2rem;
    height: 2rem;
    background: #6B6B6B;
    border-radius: 50%;
    color: #9C8283;
    text-align: center;
    line-height: 2rem;
    font-size: 2rem;margin-right:0.5rem;
    text-shadow: #ffffff -1px 1px 0px;   
    box-shadow: #ffffff 1px 1px 1px;}
	/*end*/
	.imgstyle { position: absolute;}
	.imgstyle img{width:100%;height:100%;}
	.xuanzhuanv{position:absolute;}
	.sfbtnv #js_del{background:red;color:#ffffff;margin-left:1rem;}
</style>
</head>
<body>
<div class="viewport ">
	<div class="consolemain" id="consolemain">
    	<div class="mycanvas" id="js_myconvas"> <div class="div1"></div>
        	<div class="sfbtnv"><span id="js_jia">+</span><span id="js_jian">-</span><span id="js_zuox">↺</span><span id="js_youx">↻</span><span id="js_del">×</span></div>            
        </div>
        <div class="fildbglist" id="js_sltbgimg">选择背景图片</div>
        <div class="caozuobtn">
        	<a id="js_settext"><i class="icon iconfont icon-brush"></i></a>
            <a id="js_setimg"><i class="icon iconfont icon-picture"></i></a>
            <a id="js_close"><i class="icon iconfont icon-close"></i></a>
            <a id="js_savebg"><i class="icon iconfont icon-right"></i></a>
        </div>
    </div>
    <div class="consaveimgv" id="js_consaveimg">
    	<span class="gbsaveimg" id="js_gbsaveimg"><i class="icon iconfont icon-delete"></i></span>
    	<img alt="图片加载中...." />
        <!--<p><a id="js_saveimgbackurl">点击下载图片</a></p>-->
        <p>长按图片保存到本地</p>
    </div>
    <div class="textviews" id="js_settextview">
    	<div class="textnav"><a class="textcancel">取消</a><a class="texcomplete">完成</a></div>
	    <div class="textinputv"><textarea id="settextval"></textarea></div>
        <div class="colorlist">
            <i class="clr_bai" data-color="#ffffff"></i>
            <i class="clr_hong" data-color="#ff0000"></i>
            <i class="clr_fen" data-color="#FF5ECC"></i>
            <i class="clr_huang" data-color="#fff56f"></i>
            <i class="clr_lan" data-color="#34CFEF"></i>
            <i class="clr_lv" data-color="#04A03D"></i>
            <i class="clr_hei" data-color="#000000"></i>
            <p>
            	<b class="ftf-my" data-ziti="Microsoft YaHei">微软雅黑</b>
            	<b class="ftf-si" data-ziti="SimSun">宋体</b>
            	<b class="ftf-he" data-ziti="方正舒体">方正舒体</b>
                <b class="ftf-lf" data-ziti="华文彩云">华文彩云</b>
                <b class="ftf-ar" data-ziti="Arial">Arial</b>
                <strong>|</strong>
                <b class="jiacu">粗体</b>
            </p>
        </div>
    </div>    
    <div class="bglistview" id="js_bgimglist">
        <ul id="imglist">
            <li><img src="./img/1.jpg" /></li>
            <li><img src="./img/2.jpg" /></li>
            <li><img src="./img/3.jpg" /></li>
            <li><img src="./img/4.jpg" /></li>
            <li><img src="./img/5.jpg" /></li>
            <li><img src="./img/6.jpg" /></li>
            <li><img src="./img/7.jpg" /></li>
            <li><img src="./img/8.jpg" /></li>
            <li><img src="./img/9.jpg" /></li>
            <li><img src="./img/10.jpg" /></li>
            <li><img src="./img/11.jpg" /></li>
            <li><img src="./img/12.jpg" /></li>
            <li><img src="./img/13.jpg" /></li>
            <li><img src="./img/14.jpg" /></li>
            <li><img src="./img/15.jpg" /></li>
            <li><img src="./img/16.jpg" /></li>
        </ul>
    </div>
    <input type="file" style="display:none;" id="js_fileimg" />
	<form action="" id="js_commform"></form>
</div>
<script src="./js/touch.min.js"></script>
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script>
var imgid=16;

	$(function(){
		var myconvas = function(cdom){
			this.cndom = cdom;
			this.bgimgsrc = "";
			this.bgimg = new Image();
			this.condata = { windowW : $(window).width() , windowH : $(window).height()  };
			this.prdata = [];
			this.czindex = -1;
		}
		myconvas.prototype = {
			loadbg : function (bgimg){
				
				this.bgimgsrc = this.bgimg.src = bgimg;
				this.cndom.css({"backgroundImage": "url("+bgimg+")", "display" : "block"});
				this.wbl = this.condata.windowW/this.bgimg.width;
				
				this.condata.conW = this.condata.windowW;
				this.condata.conH = Math.floor(this.bgimg.height*this.wbl);
				
				this.cndom.css({ width : this.condata.conW, height: this.condata.conH});
				this.bindsuofang();
			}, bindsuofang : function(){
				var thin = this;
				var dqdata;
				
				$("#js_jia").click(function(){
					if(thin.czindex > -1){
						dqdata = thin.prdata[thin.czindex];
						if(dqdata.type == "text"){
							dqdata.size += 1;						
							$("#"+dqdata.id).css("fontSize", dqdata.size + "px");	
						}else if(dqdata.type == "img"){
							dqdata.size += 0.2;
							$("#"+dqdata.id).css({"width": dqdata.size * dqdata.w , "height" :  dqdata.size * dqdata.h });
						}						
					}
				});
				
				$("#js_jian").click(function(){
					if(thin.czindex > -1){		
						dqdata = thin.prdata[thin.czindex];		
						if(dqdata.type == "text"){		
							dqdata.size -= 1;						
							$("#"+dqdata.id).css("fontSize", dqdata.size + "px")
						}else if(dqdata.type == "img"){
							dqdata.size -= 0.2;
							$("#"+dqdata.id).css({"width": dqdata.size * dqdata.w , "height" :  dqdata.size * dqdata.h });
						}	
					}
				});
				
				//旋转
				/*$("#js_zuox").click(function(){
					if(thin.czindex > -1){
						dqdata = thin.prdata[thin.czindex];
						dqdata.angle -= 2;				
						$("#"+dqdata.id)[0].style.webkitTransform = 'rotate(' + dqdata.angle + 'deg)';
					}
				});*/
				var tid = null;
				touch.on("#js_zuox", 'touchstart', function(ev) {
					if(thin.czindex > -1){
						tid = window.setInterval(function(){
							dqdata = thin.prdata[thin.czindex];
							dqdata.angle -= 2;				
							$("#"+dqdata.id)[0].style.webkitTransform = 'rotate(' + dqdata.angle + 'deg)';
						}, 100);
					}	
				});				
				touch.on("#js_zuox", 'touchend', function(ev) {
					clearInterval(tid);
				});
	
				/*$("#js_youx").click(function(){
					if(thin.czindex > -1){		
						dqdata = thin.prdata[thin.czindex];
						dqdata.angle += 2;						
						$("#"+dqdata.id)[0].style.webkitTransform = 'rotate(' + dqdata.angle + 'deg)';
					}
				});*/
				touch.on("#js_youx", 'touchstart', function(ev) {
					if(thin.czindex > -1){
						tid = window.setInterval(function(){
							dqdata = thin.prdata[thin.czindex];
							dqdata.angle += 2;				
							$("#"+dqdata.id)[0].style.webkitTransform = 'rotate(' + dqdata.angle + 'deg)';
						}, 100);
					}	
				});
				/*var dqdata = this.prdata[index];
				touch.on("#js_youx", 'drag', function(ev) {
					clearInterval(tid);
				});*/
				touch.on("#js_youx", 'touchend', function(ev) {
					clearInterval(tid);
				});
				
				/*var tid = null;
				$("#js_youx").mousedown(function(e){
					if(thin.czindex > -1){
						tid = window.setInterval(function(){
							dqdata = thin.prdata[thin.czindex];
							dqdata.angle += 2;				
							$("#"+dqdata.id)[0].style.webkitTransform = 'rotate(' + dqdata.angle + 'deg)';
						}, 100);
					}					
				});
				$("#js_youx").mouseup(function(e){
					clearInterval(tid);
				});
				$("#js_youx").mouseout(function(e){
					clearInterval(tid);
				});*/
				
				$("#js_del").click(function(){
					if(thin.czindex > -1){
						dqdata = thin.prdata[thin.czindex];																					
						$(".sfbtnv").hide();	
						$("#"+dqdata.id).remove();
						thin.prdata[thin.czindex] = null;
						thin.czindex = -1;	
					}
				});
			}
			//设置触发事件对象			
			,setczindex : function(index){
				this.czindex = index;
				dqdata = this.prdata[index];
				$(".sfbtnv").show().css({ "left" : dqdata.x, "top" : dqdata.y -35});				
			},
			pushtext : function(text, color, ziti, weight){
				var id = this.generateUUID();
				var x = this.condata.conW/2;
				var y = this.condata.conH/2;
				var fontSize = 20;
				var textdom = document.createElement("span");
				textdom.innerHTML = text.split("\n").join("<br>");
				textdom.className = "textstyle";
				textdom.id = id;
				$(textdom).css({"color" : color, top : y, left : x, "fontSize": fontSize+"px", "fontFamily" : ziti, "fontWeight" : weight});
				this.cndom.append($(textdom));
				
				var index = this.prdata.push({ id : id, type : 'text', text : text, color : color,weight : weight, x : x, y : y, size : fontSize, angle : 0, ziti : ziti});
				this.bindTouch("#"+id, index-1);
				this.setczindex(index-1);
				
			},pushimg : function(imgoj){
				var id = this.generateUUID();
				var x = this.condata.conW/2;
				var y = this.condata.conH/2;
				var size = 1;
				var w = this.wbl * imgoj.width * 1;
				var h =  this.wbl * imgoj.height * 1;
				var textdom = document.createElement("span");
				textdom.appendChild(imgoj);
				textdom.className = "imgstyle";
				textdom.id = id;
				$(textdom).css({top : y, left : x, width : w, height : h});
				this.cndom.append($(textdom));
				
				var index = this.prdata.push({ id : id, type : 'img', img : imgoj, x : x, y : y, w : w,h :h, size : size, angle : 0});
				this.bindTouch("#"+id, index-1);
				this.setczindex(index-1);	
			},
			//绑定移动事件
			bindTouch : function(domid, index){
				var thin = this;
				touch.on(domid, 'touchstart', function(ev) {
					if(thin.czindex != index){
						thin.setczindex(index);
					}
					ev.preventDefault();
				});
				var dqdata = this.prdata[index];
				touch.on(domid, 'drag', function(ev) {
					var offx = dqdata.x + ev.x + "px";
					var offy = dqdata.y + ev.y + "px";
										
					$(domid).css({"top" : offy, "left" : offx});
					$(".sfbtnv").show().css({ "left" : dqdata.x, "top" : dqdata.y -35 < 0 ? $(domid).height() + dqdata.y : dqdata.y - 35});
				});
				touch.on(domid, 'dragend', function(ev) {
					dqdata.x += ev.x;
					dqdata.y += ev.y;
					$(".sfbtnv").show().css({ "left" : dqdata.x, "top" : dqdata.y -35 < 0 ? $(domid).height() + dqdata.y : dqdata.y - 35});
				});
			},
			generateUUID : function() {
				var d = new Date().getTime();
				/*var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = (d + Math.random()*16)%16 | 0;
					d = Math.floor(d/16);
					return (c=='x' ? r : (r&0x3|0x8)).toString(16);
				});
				return uuid;*/
				return "js_" + d;
			}, saveimg : function(){
				
				var canvas = document.createElement("canvas");
				var thin = this;
				canvas.width = this.bgimg.width;
				canvas.height = this.bgimg.height;
				var ctx = canvas.getContext("2d");
				$("#js_consaveimg").show();

				ctx.drawImage(this.bgimg, 0, 0);
				$.each(this.prdata, function(index, value, array) {
					if(value == null) return true;
					
					
					if(value.type == "text"){
						var textdom = $("#"+value.id);
						var strlist = value.text.split("\n");
						for(var i = 0; i < strlist.length; i++){
							ctx.save();
							ctx.translate((textdom.width()/2 + value.x)/thin.wbl,  (textdom.height()/2 + value.y)/thin.wbl);																		
							ctx.rotate(value.angle*Math.PI/180);						
							ctx.translate(-(textdom.width()/2 + value.x)/thin.wbl,  -(textdom.height()/2 + value.y)/thin.wbl);
							
							ctx.font = value.weight + " " + value.size/thin.wbl + "px " + value.ziti;
							ctx.fillStyle = value.color;
							ctx.fillText(strlist[i], value.x/thin.wbl, value.y/thin.wbl + value.size/thin.wbl * (i + 1));	
							ctx.restore();	
						}
					}else if(value.type == "img"){
						ctx.save();
						ctx.translate((value.w/2+value.x)/thin.wbl,  (value.h/2+value.y)/thin.wbl);																		
						ctx.rotate(value.angle*Math.PI/180);						
						ctx.translate(-(value.w/2+value.x)/thin.wbl,  -(value.h/2+value.y)/thin.wbl);
						ctx.drawImage(value.img, value.x/thin.wbl, value.y/thin.wbl, value.w/thin.wbl*value.size, value.h/thin.wbl*value.size);
						ctx.restore();			
					}					
					
				});

				try {
					var strDataURI = canvas.toDataURL('image/png');
					this.imgbasedata = strDataURI;
					$("#js_consaveimg img").attr("src", strDataURI);
						
				　　} catch(error) {
				　　		alert("本地测试中，chrome浏览器存在跨域问题，请放在服务器测试！或者使用其他浏览器测试。");
				　　}				
				
				}
			};
		
		var mycon = new myconvas($("#js_myconvas"));
		
		//选择背景图片 弹出窗
		$("#js_sltbgimg").click(function(){
			$("#js_bgimglist").show();
		});
		
		//图片列表选择
		$("#js_bgimglist").on("click","li", function(){
			bgimg = $(this).find("img").attr("src");
			$("#js_bgimglist").hide();
			$("#js_sltbgimg").hide();
			mycon.loadbg(bgimg);
		});
		
		$("#js_settext").click(function(){
			if(!mycon.bgimgsrc.length){
				alert("请先选择背景图片！");
				return false;
			}
			$("#js_settextview").show();
			$("#settextval").focus();
			return false;	
		});
		
		// 文字操作		
		$(".textcancel").click(function(){
			resettextnr();
			
			return false;
		});
		//确定
		$(".texcomplete").click(function(){
			var textval = $.trim($("#settextval").val());

			if(textval.length){				
				mycon.pushtext(textval, $("#settextval").css("color"), $("#settextval").css("fontFamily"), $("#settextval").css("fontWeight"));				
			}
			
			resettextnr();
			return false;
		});
		$(".colorlist i").click(function(){
			var color = $(this).data("color");
			$("#settextval").css("color", color);
		});
		$(".colorlist b").click(function(){
			var ziti = $(this).data("ziti");
			$("#settextval").css("fontFamily", ziti);
		});
		$("#js_savebg").click(function(){
			if(!mycon.bgimgsrc.length){
				alert("请先选择背景图片！");
				return false;
			}
			mycon.saveimg();
		});
		$(".jiacu").click(function(){
			if($(this).hasClass("active")){
				$(this).removeClass("active")
				$("#settextval").css("fontWeight", "normal");
			}else{
				$(this).addClass("active")
				$("#settextval").css("fontWeight", "bold");
			}
		});
		$("#js_close").click(function(){
			if(confirm('确定清空操作么？')){ 
				window.location.reload(); 
			}
		});
		var	resettextnr = function(){
			$("#settextval").val("");
			$("#settextval").css("color", "#ffffff");
			$("#js_settextview").hide();
		}
		$("#js_gbsaveimg").click(function(){
			$("#js_consaveimg").hide();
		});
		//文字 end
		//图片
		$("#js_setimg").click(function(){
			if(!mycon.bgimgsrc.length){
				alert("请先选择背景图片！");
				return false;
			}
			$("#js_fileimg").click();
			//此处为改为选择本地图片 上传至服务器并返回imgurl来进行操作。			
			
		});
		$("#js_fileimg").change(function(){
			var img = new Image();
			img.onload = function(){
				mycon.pushimg(img);
			}
			//img.src = "./img/timg.jpg";			
			var preview, img_txt, localImag, file_head = document.getElementById("js_fileimg"),  
            picture = file_head.value;  
            if (!picture.match(/.jpg|.jpeg|.gif|.png|.bmp/i)){
				return alert("您上传的图片格式不正确，请重新选择！")
			}  
            
            if (file_head.files && file_head.files[0])			
                img.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);				
            else {  
               
            }            						
		});
		
		//上传图片并请求下载
		/*$("#js_saveimgbackurl").click(function(){
			if(!mycon.imgbasedata){
				alert("请先生成图片诺！");
				return false;
			}
			
			var form =	document.querySelector("#js_commform");
			form.setAttribute("method" , "POST");
			form.setAttribute("action" , "//app.kongfanrong.com/api/index/download");
			var input = document.createElement("input");
			input.setAttribute("name" , "imgdata");
			input.value = mycon.imgbasedata;
			form.submit();
						
		});*/


		$(window).scroll(function () {
			if(imgid<=117){
				var scrollTop = $(this).scrollTop();
				var scrollHeight = $(document).height();
				var windowHeight = $(this).height();
				if (scrollTop + windowHeight == scrollHeight) {
					var str="";
					for(var i=1;i<5;i++){
						imgid=imgid+i;
						str+= '<li><img src="./img/'+imgid+'.jpg" /></li>'; 
					}	
					var $tr=$(str);
					$("#imglist").append($tr);
				}
			}
			
				
		});		

	});




</script>
</body>
</html>
